<template>
	<view class="container">
		<view class="list-item" v-for="item in data">
			<view class="item-left">
				      <view class="school">
						  <image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/usr/vip.png"></image>
						  <view>{{item.school}}</view>
					  </view>
						<image :src="item.src" class="img"></image>
			</view>
			<view class="item-right">
				<view class="status">{{item.status}}</view>
				<view class="title">{{item.title}}</view>
				<view class="course-info">
					<view>课程信息</view>
					<view>{{item.courseInfo}}</view>
				</view>
				<view class="camp">
					<view>营期</view>
					<view>{{item.camp}}</view>
				</view>
				<view class="money">
					<view>
						<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/usr/dingjin.png"></image>
						<span>￥{{item.deposit}}</span>
						<view class="depositMessage">{{item.depositMessage}}</view>
					</view>
					<view>
						<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/usr/weikuan.png"></image>
						<span>￥{{item.balancePayment}}</span>
						<view class="balanceMessage">{{item.balanceMessage}}</view>
					</view>
				</view>
				<view class="btn">
					<button shape="square" class="btn-item" v-for="btnName in item.btn" @click="go(btnName)">{{btnName}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options:{
				},
				data: [{
						id: 2,
						school: '佛山校区',
						src: 'https://lives-1308318918.cos.ap-shanghai.myqcloud.com/usr/vip.png',
						status: '待结算尾款',
						title: '5天小众海滩+海韵椰林+休闲度假度蜜月',
						courseInfo: '5天少年特训营',
						camp: '2023--06-35——2023-07-07',
						deposit: 500,
						balancePayment: 2300,
						depositMessage: '于2023-07-01已支付',
						balanceMessage: '',
						btn: ['详情', '撤销退款']
					},
					{
						id: 3,
						school: '佛山校区',
						src: 'https://lives-1308318918.cos.ap-shanghai.myqcloud.com/usr/vip.png',
						status: '待结算尾款',
						title: '5天小众海滩+海韵椰林+休闲度假度蜜月',
						courseInfo: '5天少年特训营',
						camp: '2023--06-35——2023-07-07',
						deposit: 500,
						balancePayment: 2300,
						depositMessage: '于2023-07-01已支付',
						balanceMessage: '已支付',
						btn: ['退款']
					}
				]
			}
		},
		methods:{
			go(name){
               uni.navigateTo({
               	url:this.options[name]
               })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// padding: 20rpx;
	}
	.list-item{
		background-color: white;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		.item-left{
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			width: 30vw;
			.school{
				display: flex;
				width: 100%;
				height: 50rpx;
				image{
					height:50rpx;
					width: 50rpx;
				}
			}
			.img{
				width: 100%;
				height:280rpx;
				margin-right: 10rpx;
			}
		}
		.item-right{
			padding: 20rpx;
			box-sizing: border-box;
			width: 70vw;
			.status{
				    text-align: right;
				    color: #FFAA5B;
				    font-size: 32rpx;
			}
			.title{
				    font-size: 32rpx;
				    font-weight: 600;
				    display: -webkit-box;
				    -webkit-box-orient: vertical;
				    -webkit-line-clamp: 1;
				    overflow: hidden;
			}
			.money{
				.balanceMessage{
					color:#C0C4C1;
				}
				span{
					color:#F2450F;
					font-size: 32rpx;
					vertical-align: middle;
				}
				.depositMessage{
					color:#C0C4C1
				}
				image{
					vertical-align: middle;
					width: 50rpx;
					height: 50rpx;
				}
			}
			view{
				padding: 5rpx 0;
			}
			.camp,.money,.course-info{
				display: flex;
				justify-content: space-between;
			}
			.btn{
				display: flex;
				justify-content: flex-end;
				margin-top:20rpx;
				button{
					color:#007E51;
					border:1px solid #007E51;
					// border-radius: 60rpx;
					margin-left: 30rpx ;
					border-raduis:30rpx;
					font-size: 30rpx;
					padding: 10rpx 30rpx;
				}
			}
		}
	}
</style>